<template>
    <div class="login-page">
        <div class="login-box">
            <div class="login-title">群楼后台管理系统</div>
            <div class="login-form">
                <el-form :model="loginForm" :rules="rules" size="large" ref="loginFormRef" label-width="65px"
                    key="loginFormRef" label-position="left">
                    <el-form-item prop="username" label="用户名">
                        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="code" label="验证码">
                        <el-input v-model="loginForm.code" placeholder="请输入验证码" class="obtain-verify-code-input">
                            <template #append>
                                <img :src="'data:image/png;base64,' + codeImg" alt="验证码" width="120" height="38"
                                    @click="getCodeImg()" />
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="loginSubmit(loginFormRef)">登陆</el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
// ---------------------------------------------------导入相关引用---------------------------------------------------
import { ref, reactive, onMounted } from 'vue';
import userStore from '@/store/user'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { Login, obtainVerifyCode, type LoginForm } from '@/api/login'
import router from '@/router'
// ---------------------------------------------------相关参数定义---------------------------------------------------
const codeImg = ref('');

const loginFormRef = ref<FormInstance>();
const loginForm = reactive<LoginForm>({
    username: 'admin',
    password: 'Admin@1234',
    code: '',
    uuid: ''
});

const rules = reactive<FormRules<LoginForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
    ]
})
// ---------------------------------------------------事件定义---------------------------------------------------

// ---------------------------------------------------操作方法定义---------------------------------------------------
onMounted(() => {
    userStore.commit("SET_TOKEN", "")
    userStore.commit("REMOVE_USER_INFO")
    getCodeImg()
})

const getCodeImg = () => {
    obtainVerifyCode().then((res) => {
        if (res && res.data.code == 200) {
            codeImg.value = res.data.data.verifyCode
            loginForm.uuid = res.data.data.uuid
        }
    })
}

const loginSubmit = async (ref: FormInstance | undefined) => {
    if (!ref) return
    await ref.validate((valid, fields) => {
        if (valid) {
            Login(loginForm).then((res) => {
                if (res.data.code == 200) {
                    userStore.commit('SET_TOKEN', res.data.data)
                    router.push({ name: 'Home' });
                    ElMessage({ message: "登陆成功", type: 'success' })
                }else{
                    getCodeImg()
                }
            })
        }
    })
}

// ---------------------------------------------------实体定义区---------------------------------------------------
</script>

<style lang="scss" scoped>
.login-page {
    width: 100%;
    height: 100%;
    background: url(@/assets/images/login-bg.jpg) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;

    .login-box {
        width: 400px;
        height: 300px;
        margin: 0 auto;
        padding: 20px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

        .login-title {
            font-size: 24px;
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            font-weight: bold;
            font-family: '微软雅黑';
            font-style: italic;
        }

        .login-form {
            width: 100%;
            height: 100%;

            :deep() .el-input .el-input__wrapper {
                background-color: rgba(255, 255, 255, 0.5);

                input::placeholder {
                    color: #5b5b5b;
                }

            }

            .obtain-verify-code-input {
                :deep() .el-input-group__append {
                    padding: 0;
                }
            }
        }

        .el-button {
            font-size: 18px;
            font-weight: bold;
            font-family: '微软雅黑';
            width: 180px;
            height: 36px;
            margin: 0 auto;

        }
    }
}
</style>